<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-select v-model="systemQueryValue" size="small" placeholder="请选择">
            <el-option v-for="item in systemQueryOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-date-picker v-model="timeQuery" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small"></el-date-picker>
        </el-col>
        <el-col :span="3" :offset="2">
          <el-tag :type="timeFilterType.seven" @click="sevenFilter">7天</el-tag>
          <el-tag :type="timeFilterType.thirty" @click="thirtyFilter">30天</el-tag>
        </el-col>
        <el-col :span="2">
          <a class="clear_filter" @click="clearFilter">清空筛选</a>
        </el-col>
      </el-row>
      <el-row class="statistics">
        <el-col :span="4">
          <div>1642</div>
          <div>
            用户数
            <el-tooltip content="统计全平台用户数，不随店铺的更改而更改" placement="bottom">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
        </el-col>
        <el-col :span="4">
          <div>928</div>
          <div>商品数</div>
        </el-col>
        <el-col :span="4">
          <div>112</div>
          <div>订单数</div>
        </el-col>
        <el-col :span="4">
          <div>23</div>
          <div>待发货订单数</div>
        </el-col>
        <el-col :span="4">
          <div>0</div>
          <div>维权订单数</div>
        </el-col>
        <el-col :span="4">
          <div>69</div>
          <div>商品库存预警</div>
        </el-col>
      </el-row>
    </el-card>
    <div class="charts">
      <el-card>
        <div slot="header" class="clearfix">
          <span>销售情况</span>
          <el-button style="float: right; padding: 3px 0;" type="text">导出表单</el-button>
        </div>
        <ve-line :data="sellData"></ve-line>
      </el-card>
      <el-card>
        <div slot="header" class="clearfix">
          <span>销售情况</span>
          <el-button style="float: right; padding: 3px 0;" type="text">导出表单</el-button>
        </div>
        <ve-pie :data="viewData"></ve-pie>
      </el-card>
    </div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>常用功能</span>
      </div>
      <el-row class="tools">
        <el-col :span="4" @click.native="navigateTo('/addGoods')">
          <i class="el-icon-goods"></i>
          <span>添加商品</span>
        </el-col>
        <el-col :span="4" @click.native="navigateTo('/orderList')">
          <i class="el-icon-document"></i>
          <span>订单管理</span>
        </el-col>
        <el-col :span="4" @click.native="navigateTo('/afterServiceList')">
          <i class="el-icon-chat-dot-square"></i>
          <span>售后维权</span>
        </el-col>
        <el-col :span="4">
          <i class="el-icon-data-line"></i>
          <span>数据统计</span>
        </el-col>
        <el-col :span="4">
          <i class="el-icon-magic-stick"></i>
          <span>店铺装修</span>
        </el-col>
        <el-col :span="4">
          <i class="el-icon-set-up"></i>
          <span>设置</span>
        </el-col>
      </el-row>
    </el-card>
    <div class="paihang">
      <el-card>
        <div slot="header" class="clearfix top_paihang">
          <span>商品购买力top排行</span>
          <el-button type="primary" size="mini">导出TOP100</el-button>
        </div>
        <el-table class="paihang_table" :data="goodsTableData" :default-sort="{ prop: 'date', order: 'descending' }">
          <el-table-column label="排名" type="index" :index="indexMethod"> </el-table-column>
          <el-table-column label="商品" prop="goods_name"></el-table-column>
          <el-table-column label="销售额" prop="goods_sales" sortable width="100"></el-table-column>
          <el-table-column label="销量" prop="goods_count" sortable width="80"></el-table-column>
        </el-table>
      </el-card>
      <el-card>
        <div slot="header" class="clearfix top_paihang">
          <span>用户购买力top排行</span>
          <el-button type="primary" size="mini">导出TOP100</el-button>
        </div>
        <el-table class="paihang_table" :data="userTableData" :default-sort="{ prop: 'date', order: 'descending' }">
          <el-table-column label="排名" type="index" :index="indexMethod"></el-table-column>
          <el-table-column label="用户">
            <template slot-scope="scope">
              <div class="userInfo">
                <img :src="scope.row.head_pic" />
                <span>{{ scope.row.username }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="支付金额" sortable width="100"></el-table-column>
          <el-table-column prop="count" label="支付件数" sortable width="100"></el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- <div v-html="paihang_index"></div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      systemQueryOptions: [
        {
          value: 'all',
          label: '全部平台',
        },
        {
          value: 'app',
          label: 'App',
        },
        {
          value: 'wxh5',
          label: '微信公众号',
        },
        {
          value: 'wxapp',
          label: '小程序',
        },
      ],
      systemQueryValue: 'all',
      timeQuery: [],
      timeFilterType: {
        seven: 'info',
        thirty: 'info',
      },
      sellData: {
        columns: ['日期', '华东', '华南', '华北', '西部', '其他'],
        rows: [
          {
            日期: '04-08',
            华东: 1393,
            华南: 1093,
            华北: 1232,
            西部: 1503,
            其他: 1620,
          },
          {
            日期: '04-09',
            华东: 3530,
            华南: 3230,
            华北: 3026,
            西部: 2980,
            其他: 2635,
          },
          {
            日期: '04-10',
            华东: 2923,
            华南: 2623,
            华北: 2800,
            西部: 3013,
            其他: 2630,
          },
          {
            日期: '04-11',
            华东: 1723,
            华南: 1423,
            华北: 1856,
            西部: 1684,
            其他: 1359,
          },
          {
            日期: '04-12',
            华东: 3792,
            华南: 3492,
            华北: 3023,
            西部: 3021,
            其他: 2830,
          },
          {
            日期: '04-13',
            华东: 4593,
            华南: 4293,
            华北: 4136,
            西部: 4659,
            其他: 4010,
          },
          {
            日期: '04-14',
            华东: 4230,
            华南: 5412,
            华北: 3546,
            西部: 3864,
            其他: 4368,
          },
          {
            日期: '04-15',
            华东: 3986,
            华南: 4356,
            华北: 4632,
            西部: 4230,
            其他: 5321,
          },
        ],
      },
      viewData: {
        columns: ['日期', '访问用户'],
        rows: [
          { 日期: '1/1', 访问用户: 1393 },
          { 日期: '1/2', 访问用户: 3530 },
          { 日期: '1/3', 访问用户: 2923 },
          { 日期: '1/4', 访问用户: 1723 },
          { 日期: '1/5', 访问用户: 3792 },
          { 日期: '1/6', 访问用户: 4593 },
        ],
      },
      goodsTableData: [
        {
          goods_name: '金桔（5斤包邮）',
          goods_sales: 1280.0,
          goods_count: 324,
        },
        {
          goods_name: '一次性防护口罩（单片独立包装）',
          goods_sales: 279.8,
          goods_count: 2,
        },
        {
          goods_name: '五常稻花香2号',
          goods_sales: 1254.0,
          goods_count: 46,
        },
        {
          goods_name: '粤北（南雄）腊肉（500g±20g）',
          goods_sales: 332.26,
          goods_count: 4,
        },
      ],
      userTableData: [
        {
          username: '恍然如梦。',
          head_pic: 'http://yanxuan.nosdn.127.net/38a325ddc659aaedffa4d9d7e95695d5.png',
          amount: 6843.2,
          count: 24,
        },
        {
          username: 'Alice',
          head_pic: 'http://yanxuan.nosdn.127.net/cc29a8c9d852011c06dab862f8a1135c.png',
          amount: 5861.6,
          count: 20,
        },
        {
          username: '繁星点点Dimples_',
          head_pic: 'http://yanxuan.nosdn.127.net/f456d527464fef67caa07c52baeea136.png',
          amount: 5468.8,
          count: 18,
        },
        {
          username: '芒夏。',
          head_pic: 'http://yanxuan.nosdn.127.net/cf5d6d491a10358e87a85f1f8308eb11.png',
          amount: 4986.8,
          count: 17,
        },
      ],
      paihang_index: '<span style="color:red">3</span>',
    }
  },
  methods: {
    sevenFilter() {
      this.timeFilterType.thirty = 'info'
      this.timeFilterType.seven = 'warning'
    },
    thirtyFilter() {
      this.timeFilterType.seven = 'info'
      this.timeFilterType.thirty = 'warning'
    },
    clearFilter() {
      this.systemQueryValue = 'all'
      this.timeQuery = []
      this.timeFilterType.seven = 'info'
      this.timeFilterType.thirty = 'info'
    },
    indexMethod(index) {
      return '0' + (index + 1)
    },
    navigateTo(path) {
      this.$router.push(path)
    },
  },
}
</script>

<style lang="scss" scoped>
.el-card {
  margin-bottom: 10px;
}
.page_title {
  font-size: 14px;
}
.el-tag {
  cursor: pointer;
  margin-right: 10px;
}
.clear_filter {
  font-size: 14px;
  cursor: pointer;
  line-height: 32px;
}
.statistics {
  text-align: center;
  .el-col {
    margin-top: 10px;
    border-right: 1px dotted #eee;
    div:nth-child(1) {
      font-size: 26px;
      margin-top: 10px;
    }
    div:nth-child(2) {
      font-size: 14px;
      color: #aaa;
    }
  }
  .el-col:last-child {
    border: none;
  }
}
.charts,
.paihang {
  display: flex;
  justify-content: space-between;
  .el-card {
    width: 49.6%;
  }
}
.tools {
  text-align: center;
  .el-col {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    i {
      display: block;
      margin: 0 20px;
      width: 48px;
      height: 48px;
      line-height: 48px;
      font-size: 24px;
      color: #fff;
      background-color: #409eff;
      border-radius: 6px;
    }
  }
}
.top_paihang {
  display: flex;
  justify-content: space-between;
  span {
    line-height: 28px;
  }
}
.paihang {
  .el-card__body {
    padding-top: 0 !important;
  }
  .el-table {
    margin: 0;
    td {
      padding: 12px 0;
    }
  }
}
.userInfo {
  display: flex;
  align-items: center;
  img {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    margin-right: 10px;
  }
}
::v-deep .el-table__row {
  height: 62px;
}
</style>
